<script setup lang="ts">
import {NButton, NDataTable, NPopconfirm, NSpace, NTag} from 'naive-ui'
import {h, onMounted, ref} from 'vue'
import {ManagerTable} from '@components'
import {useSysUserStore} from '../stores/sys-user-store'
import UserSearch from '../components/UserSearch.vue'
import UserInfoEditor from '../components/UserInfoEditor.vue'
import {UserFormDefault} from '../consts/user-form-default'
import {useMessage} from 'naive-ui'
import {StnDataTableColumns} from 'st-ui-vue3-navie'

const message = useMessage()
const sysUserStore = useSysUserStore()

// 表格加载状态
const loading = ref(false)

// 表格列定义
const columns: StnDataTableColumns = [
  {
    title: '用户名',
    key: 'username',
    width: 120,
    checked: true,
  },
  {
    title: '昵称',
    key: 'nickname',
    width: 120,
    checked: true,
  },
  {
    title: '邮箱',
    key: 'email',
    width: 180,
    checked: true,
  },
  {
    title: '手机号',
    key: 'phone',
    width: 120,
    checked: true,
  },
  {
    title: '性别',
    key: 'gender',
    width: 80,
    checked: true,
    render(row) {
      const genderMap = {
        0: {
          type: 'default',
          text: '未知'
        },
        1: {
          type: 'info',
          text: '男'
        },
        2: {
          type: 'success',
          text: '女'
        }
      }
      const gender = genderMap[row.gender]
      return h(NTag, {
        type: gender.type,
        size: 'small'
      }, {
        default: () => gender.text
      })
    }
  },
  {
    title: '状态',
    key: 'status',
    width: 80,
    checked: true,
    render(row) {
      return h(NTag, {
        type: row.status === 1 ? 'success' : 'error',
        size: 'small'
      }, {
        default: () => row.status === 1 ? '启用' : '禁用'
      })
    }
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 180,
    checked: true,
  },
  {
    title: '操作',
    key: 'actions',
    width: 200,
    fixed: 'right',
    checked: true,
    render(row) {
      return h(NSpace, {}, {
        default: () => [
          h(NButton, {
            size: 'small',
            onClick: () => handleEdit(row)
          }, {
            default: () => '编辑'
          }),
          h(NPopconfirm, {
            onPositiveClick: () => handleDelete(row)
          }, {
            trigger: () => h(NButton, {
              size: 'small',
              type: 'error'
            }, {
              default: () => '删除'
            }),
            default: () => '确认删除该用户吗？'
          })
        ]
      })
    }
  }
]

// 编辑对话框显示状态
const showEditor = ref(false)
// 是否为新增
const isAdd = ref(false)
// 编辑表单数据
const editForm = ref({...UserFormDefault})

/**
 * 新增用户
 */
const handleAdd = () => {
  isAdd.value = true
  editForm.value = {...UserFormDefault}
  showEditor.value = true
}

/**
 * 编辑用户
 */
const handleEdit = (row) => {
  isAdd.value = false
  editForm.value = {...row}
  showEditor.value = true
}

/**
 * 删除用户
 */
const handleDelete = async (row) => {
  try {
    await sysUserStore.deleteUser(row.id)
    message.success('删除成功')
    await sysUserStore.getUserDataByReq()
  } catch (error) {
    message.error('删除失败')
  }
}

/**
 * 关闭编辑对话框
 */
const handleEditorClose = () => {
  showEditor.value = false
}

// 组件挂载时加载数据
onMounted(async () => {
  await sysUserStore.getUserDataByReq()
})
</script>

<template>
  <ManagerTable
    :columns="columns"
    :data="sysUserStore.tableData"
    :row-key="row => row.id"
    :loading="sysUserStore.tableLoading"
    :get-data-handler="sysUserStore.getUserDataByReq"
    :del-handler="sysUserStore.deleteUser"
    :show-editor-handler="handleEdit"
    @add="handleAdd"
  >
    <template #search>
      <UserSearch/>
    </template>
  </ManagerTable>
  <UserInfoEditor
    v-model:show="showEditor"
    :form="editForm"
    :is-add="isAdd"
    :close-handler="handleEditorClose"
  />
</template> 